<script setup lang="ts">
  import { PropType } from 'vue'
  import { MultipleSelectConfig } from '../../hooks/types'

  defineOptions({
    name: 'OrderCustomFormMultipleSelect',
  })

  const emits = defineEmits<{
    (e: 'change'): void
  }>()

  const props = defineProps({
    placeholder: {
      type: String,
      default: () => '请选择选项',
    },
    options: {
      type: Array as PropType<MultipleSelectConfig['options']>,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default: () => false,
    },
  })

  // 双向绑定
  const value = defineModel<Array<string | number | boolean>>('modelValue', { default: [] })
</script>

<template>
  <el-select
    v-model="value"
    :placeholder="props.placeholder"
    clearable
    multiple
    :disabled="props.disabled"
    @change="emits('change')"
  >
    <el-option
      v-for="(option, optionIndex) in props.options"
      :key="optionIndex"
      :value="option.value"
      :label="option.label"
    />
  </el-select>
</template>

<style scoped lang="scss">
  :deep(.el-select__wrapper) {
    height: fit-content !important;
  }
</style>
